<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="save()">点我保存数据</button>
   <button onclick="read()">点我读取数据</button>
     <button onclick="del()">点我删除数据</button>
    <button onclick="clearAll()">点我清空所有数据</button>

    <script>
        //准备数据
        let person = {name:'张三',age:18}

        //存储数据
        function save(){
            console.log(555)
            localStorage.setItem("str","好好学习");
            //变量是一个对象  是无法预览值的
            localStorage.setItem("zs",person);
            //如果需要存储一个可以看见的对象 转为json字符串存储
            localStorage.setItem("zs",JSON.stringify(person));

            /* sessionStorage.setItem(); */
        }


        //读取数据
        function read(){
            console.log(localStorage.getItem("zs"));
           /*  sessionStorage.getItem(); */
        }

        //删除数据
        function del(){
            localStorage.removeItem("zs");
            /* sessionStorage.removeItem() */
        }

        //清空存储的全部数据
        function clearAll(){
            localStorage.clear();
            /* sessionStorage.clear() */
        }

        /* 
        总结：
        WebStorage js本地存储
        浏览器通过window.localStorage 和window.sessionStorage可以在浏览器上存储数据  通常支持5MB左右
        相关api:
        setItem(key,value)  存储数据
        getItem(key) 根据key获取数据
        removeItem(key) 根据key移除指定数据
        clear() 清空所有存储的数据
        两个本地存储的api都一样，区别在于：
        sessionStorage存储的数据会随着浏览器窗口的关闭而小时  是一个会话级别的
        localStorage 存储的内容理论上不删除会一直存在  手动删除
        另外 如果获取数据的时 没有数据   返回的null

        
        
        */

    </script>

    
</body>
</html>